/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #ff8434ff;
  --ifm-color-primary-dark: #ee5f00ff;
  --ifm-color-primary-darker: #e25a00ff;
  --ifm-color-primary-darkest: #cd5200ff;
  --ifm-color-primary-light: #ff9d5cff;
  --ifm-color-primary-lighter: #ffa971ff;
  --ifm-color-primary-lightest: #ffba8dff;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --bs-gutter-y: 0;
  --bs-gutter-x: 1.5rem;
  --spacers: 1rem;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #ff8434ff;
  --ifm-color-primary-dark: #ee5f00ff;
  --ifm-color-primary-darker: #e25a00ff;
  --ifm-color-primary-darkest: #cd5200ff;
  --ifm-color-primary-light: #ff9d5cff;
  --ifm-color-primary-lighter: #ffa971ff;
  --ifm-color-primary-lightest: #ffba8dff;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}


.footer--dark {
  --ifm-footer-background-color: #ee5f00ff;
}

/* Flex table */
.table-container {
  display: block;
  margin: 2em auto;
}

.flag-icon {
  margin-right: 0.1em;
}

.flex-table {
  display: flex;
  border-bottom: solid 1px #d9d9d9;
  flex-flow: row wrap;
  transition: 0.5s;
  &:first-of-type {
    border-top: solid 1px #d9d9d9;
    color: white;
  }
  &:first-of-type a {
    color: white;
  }
  &:first-of-type .flex-row {
    background: var(--ifm-color-primary-lightest);
    border-color: #d9d9d9;
  }
  &.row:nth-child(odd) .flex-row {
    background: #d9d9d9;
  }
  &:hover {
    background: #F5F5F5;
    transition: 500ms;
  }
}

.flex-row, .flex-group {
  padding: 0.5em 0.5em;
}

.flex-row {
  width: calc(100% / 4);
  text-align: center;
}

.flex-group {
  color: white;
  width: 100%;
  background-color: var(--ifm-color-primary-lightest);
}

.rowspan {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
}

.gy-5 {
  --bs-gutter-y: 3rem;
}

.mb-5 {
  padding-bottom: calc(3 * var(--spacers));
}

.pt-3 {
  padding-top: var(--spacers);
}

.row {
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row>* {
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

.column {
  display: flex;
  flex-flow: column wrap;
  width: 75%;
  padding: 0;
  .flex-row {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: solid 1px #d9d9d9;
    &:hover {
      background: #F5F5F5;
      transition: 500ms;
    }
  }
}

.flex-cell {
  width: calc(100% / 3);
  text-align: center;
  padding: 0.5em 0.5em;
  border-right: solid 1px #d9d9d9;
}

@media all and (max-width: 767px) {
  .flex-row {
    width: calc(100% / 3);
    
   &.first {
     width: 100%;
   }
  }

  .column {
    width: 100%;
  }
}

@media all and (max-width: 430px) {  
  .flex-table {
    .flex-row {
      border-bottom: 0;
    }
    .flex-row:last-of-type {
      border-bottom: solid 1px #d9d9d9;
    }
  }
  
  .header {
    .flex-row {
      border-bottom: solid 1px;
    }
  }
  
  .flex-row {
    width: 100%;
    
   &.first {
     width: 100%;
     border-bottom: solid 1px #d9d9d9;
   }
  }

  .column {
    width: 100%;
    .flex-row {
      border-bottom: solid 1px #d9d9d9;
    }
  }

  .flex-cell {
    width: 100%; 
  }
}

.greencheck {
  width: 20px;
  height: 20px;
}